<template>
	<view>
		<view class="xing">
			<view class="xing_k" v-for="(a,b) in content" :key="b">
				<view class="x_title">{{a.name}}：</view>
				<view class="x_img">
					<view class="ping" >
						<view class="zheng_xin" v-for="(row,index) in a.hui" @click="dian(b,index)" :key="index">
							<image class="img" src="/static/star01.png" v-if="a.zheng-0.5>index" />
							<image class="img" src="/static/star02.png" v-if="a.ban && a.zheng>index"/>
							<image class="img" src="/static/star03.png" v-if="a.zheng<=index"/>
						</view>
					</view>
				</view>
				<view class="x_fen">{{a.zheng}}分</view>
			</view>
		</view>
		<view class="content">
			<view class="title">评价内容：</view>
			<view class="pingtext"><textarea placeholder="请输入您的评价内容!" v-model="commentForm.content"></textarea></view>
		</view>
		<view class="btn" @click="add()">提交</view>
	</view>
</template>

<script>
	import {CommentService} from '@/api/MessageService.js';
	export default {
		data() {
			return {
				content:[
					{name:'产品与描述相符',hui:5,zheng:'5',ban:'false',sum:0},
					{name:'卖家的服务态度',hui:5,zheng:'5',ban:'false',sum:0},
					{name:'卖家的发货速度',hui:5,zheng:'5',ban:'false',sum:0}
				],
				commentForm:{orderNo:undefined,sn:undefined,content:undefined,sameScore:5,serviceScore:5,shipScore:5}
			}
		},
		onLoad(options) {
			this.commentForm.orderNo=options.orderNo;
			this.commentForm.sn=options.sn;
		},
		methods: {
			dian(b,e){
				var that=this
				var a=e++
				that.content[b].sum++
				if(that.content[b].sum==1){
					that.content[b].zheng=e-0.5
					that.content[b].ban=true
					that.content[b].sum=-1
				}else{
					that.content[b].ban=false
					that.content[b].zheng=e++
				}
				switch(b){
					case 0:
						this.commentForm.sameScore=that.content[b].zheng
						break;
					case 1:
						this.commentForm.serviceScore=that.content[b].zheng
						break;
					case 2:
						this.commentForm.shipScore=that.content[b].zheng
						break;						
				}
			},
			add(){
				if(!this.commentForm.content){
					uni.showToast({
						icon:"none",
						title:"请输入评价内容!"
					});
					return;
				}
				CommentService.addComment(this.commentForm).then(()=>{
					uni.navigateBack({});
				});
			}
		}
	}
</script>

<style>
	page{
		
	}
/* 点评星级 */
.xing{
	width: 100%;
	height:250upx;
	padding: 25upx;
	box-sizing: border-box;
	overflow: hidden;
}
.xing_k{
	width: 100%;
	line-height:80upx;
	overflow: hidden;
}
.x_title{
	float: left;
}
.x_img{
	/* width: 250upx; */
	height: 30upx;
	max-width:80%;
	float: left;
}
.ping{
	/* width: 150upx; */
	height: 40upx;
	float: left;
}
.zheng_xin{
	width: 40upx;
	height: 40upx;
	margin: 10upx;
	float: left;
}
.ban_xin{
	width: 40upx;
	height: 40upx;
	margin: 10upx;
	float: left;
}
.img{
	width: 100%;
	height: 100%;
}
/* 点评内容 */
.content{
	padding: 20upx;
}
.title{
	line-height: 100upx;
}
.pingtext{
	margin: 0 auto;
	width: 90%;
	border-radius: 10upx;
	padding: 20upx;
	background: #f5f5f5;
}
.btn{
	width:60% ;
	height: 100upx;
	margin: 100upx auto;
	background: linear-gradient(to left,#ed4217,#ed751e);
	border-radius:50upx;
	color: #FFFFFF;
	line-height: 100upx;
	text-align: center;
}
</style>
